<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            display: flex;
            justify-content: space-around;
            padding: 10px;
        }

        li img{
            width: 100px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="box">
    
        <div v-if="list.length===0">购物车空空如也</div>
        <template v-else>
            <input type="checkbox"  v-model="isAllChecked" >全选/全不选
            <ul>
                <li v-for="(item,index) in list" :key="item.id">
                    <input type="checkbox" v-model="checkGroup" :value="item" @change="checked()">
                    <img :src="item.pic" />
    
                    <div>
                        <div>商品名称:{{item.name}}</div>
                        <div>商品价格:￥{{item.price}}</div>
                    </div>
    
                    <div>
                        <button @click="item.number--" :disabled="item.number===1">-</button>
                        {{item.number}}
                        <!-- 动态设置限购 表示item.number===item.limit条件满足时disabled生效 -->
                        <button @click="item.number++" :disabled="item.number===item.limit">+</button>
                    </div>
    
                    <div>
                        <button @click="handleDelete(index, item.id)">删除</button>
                    </div>
    
                </li>
            </ul>
    
            <div style="background-color: yellow;">
                总金额: {{ sum() }}
            </div>
        </template>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#box",
            data: {
                checkGroup:[],  //调用checkGroup，gte、set拦截并遍历所有与checkGroup关联的
                //全选功能和全不选功能，绑定一个布尔值，当isAllChecked为真时为全选中，为假时为全不选中
                isAllChecked: false,
                list:[
                    {
                    name: "商品1",
                    price: 10,
                    number: 1,
                    id: 1,
                    limit: 5, //限购
                    pic:"https://img.zcool.cn/community/01c57e5af981b2a8012160451f917b.jpg@1280w_1l_2o_100sh.jpg"
                    },
                    {
                    name: "商品2",
                    price: 20,
                    number: 2,
                    id: 2,
                    limit: 10,
                    pic:"https://img.zcool.cn/community/01c57e5af981b2a8012160451f917b.jpg@1280w_1l_2o_100sh.jpg"
                    },
                    {
                    name: "商品3",
                    price: 30,
                    number: 3,
                    id: 3,
                    limit: 15,
                    pic:"https://img.zcool.cn/community/01c57e5af981b2a8012160451f917b.jpg@1280w_1l_2o_100sh.jpg"
                    }
                    ]
                },
            methods:{
                sum(){  //依赖checkGroup
                    //该函数式作用：将checkGroup数组进行遍历获取，并将获取到的数据传入到total中进行累加
                    var total = 0
                    this.checkGroup.forEach(item=>{
                     total+= item.price*item.number
                    })
                    //需要手动return
                    console.log(total)
                    return total
                    },
                    //删除功能
                    handleDelete(index, deleteid){ 
                        console.log(deleteid)
                        //删除checkGroup数组对应的元素（需要通过id删除）

                        /* filter数组过滤，表示每次对checkGroup进行filter过滤时，
                        会将item.id与deleteid进行对比，如果不等于就留下，相等就不保留 */
                        this.checkGroup = this.checkGroup.filter(item=> item.id!==deleteid)

                         //只删除原数组，checkGroup中的没有同步删除
                         this.list.splice(index, 1)
                        
                         //判定是否全勾上
                         this.checked()
                    },
                    
                    // 判断是否全选
                    checked(){
                        // 判断长度和原始数组长度是否相等，相等就勾选全选
                        if(this.checkGroup.length === this.list.length){
                            this.isAllChecked = true
                        }else{
                            this.isAllChecked = false
                        }
                    }
                },

            watch:{
                //监听状态的改变
                isAllChecked(data){
                    console.log('isAllChecked状态改变', data)
                    if(this.isAllChecked){
                        this.checkGroup = this.list
                    }else{
                        if(this.checkGroup.length === this.list.length){
                            this.checkGroup = []
                        }
                    }
                }
            }
            })
    </script>
</body>
</html>